<template>
  <div class="index">
    <el-carousel class="carousel" height="560px">
      <el-carousel-item class="carousel_item" v-for="item in banner" :key="item.name">
        <img :src="item.bg" class="banner_bg" />
        <div class="carousel_center">
          <div class="carousel_left">
            <div class="carousel_title">中电云网</div>
            <div class="carousel_content">{{item.content}}</div>
          </div>
          <img :src="item.icon" alt class="banner_icon" />
        </div>
      </el-carousel-item>
    </el-carousel>

    <div class="section">
      <div class="center" style="min-width:1400px">
        <div class="title">核心能力</div>
        <div class="items">
          <div class="single" v-for="(item,index) in ability" :key="index">
            <img class="icon" :src="item.icon" alt />
            <div class="single_title">{{item.name}}</div>
            <div class="content">{{item.content}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="section area">
      <div class="center area_center">
        <div class="title area_title">区域子平台</div>
        <div class="items">
          <div class="area_single" v-for="(item,index) in area" :key="index">
            <div class="area_icon">
              <img class="area_img" :src="item.icon" alt />
            </div>
            <div class="single_title">{{item.name}}</div>
            <div class="content">{{item.content}}</div>
            <div class="btn">查看详情</div>
          </div>
        </div>
      </div>
    </div>

    <div class="section area industry" :class="industry_bg">
      <div class="center area_center">
        <div class="title area_title">行业子平台</div>
        <div class="items">
          <div class="industry_single" v-for="(item,index) in industry" :key="index">
            <img class="area_img" :src="item.icon" alt />
            <div class="single_title">{{item.name}}</div>
            <div class="content">{{item.content}}</div>
            <div class="btn" @mouseenter="mounseEnter(item.bg)">查看详情</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [
        {
          name: "1",
          bg: require("@/assets/img/banner.png"),
          icon: require("@/assets/img/banner1.png"),
          content: "平台布局 / 安全为本 / 产融结合 / 联盟创新"
        },
        {
          name: "2",
          bg: require("@/assets/img/banner.png"),
          icon: require("@/assets/img/banner2.png"),
          content: "聚焦电子信息 / 助力中小企业"
        },
        {
          name: "3",
          bg: require("@/assets/img/banner.png"),
          icon: require("@/assets/img/banner3.png"),
          content: "为甲方增毛利 / 为乙方拓市场 / 促园区建共享 / 助政府上水平"
        }
      ],
      ability: [
        {
          icon: require("@/assets/img/icon1.png"),
          name: "物联接入",
          content:
            "面向多行业设备的连接服务，提供便捷、开放的设备接入解决方案，支持企业任意设备快速上云。"
        },
        {
          icon: require("@/assets/img/icon2.png"),
          name: "大数据服务",
          content:
            "支持PB级的工业大数据处理分析能力，解决工业数据云化存储、计算、安全问题，资源实时动态弹性分配。"
        },
        {
          icon: require("@/assets/img/icon3.png"),
          name: "开发者服务",
          content:
            "集合云计算、云存储、云开发的一站式工业云服务，提供应用开发所需各类中间件和微服务，支持持续构建与持续部署，提高开发运维协同能力。"
        },
        {
          icon: require("@/assets/img/icon4.png"),
          name: "工业应用",
          content:
            "自研APP与应用市场汇聚的各类生态APP，赋能企业智能制造升级，提升全流程竞争力。"
        }
      ],
      area: [
        {
          icon: require("@/assets/img/area1.png"),
          name: "长沙工业云平台",
          content:
            "整合主流核心服务商资源，为企业提供云产品、解决方案、供需服务、云双创和云金融服务，差异化推进长沙重点及特色产业的智能制造升级改造。"
        },
        {
          icon: require("@/assets/img/area2.png"),
          name: "中电福建工业互联网平台",
          content:
            "以优势产业制鞋业为重点。为企业提供智能评测、智能应用、信息服务和设备物联服务。"
        },
        {
          icon: require("@/assets/img/area3.png"),
          name: "江宁产业云平台",
          content:
            "基于安全可信的物联网云平台架构，为行业、企业、政府提供可信物联端到端的解决方案，打造全国领先的物联网综合公共服务平台。"
        }
      ],
      industry: [
        {
          bg: 'smt_bg',
          icon: require("@/assets/img/smt.png"),
          name: "SMT行业云",
          content:
            "SMT行业云平台采取工业互联网云工厂模式，在终端用户和SMT工厂之间建立数据、技术、资本、市场等全要素的全面互联，及供应链、创新链、服务链、金融链等全产业链上下游的高度协同，实现最快交期、最高质量、最低成本交付产品，重构SMT行业的生产方式和商业范式，赋能SMT行业的转型升级。"
        },
        {
          bg: 'xls_bg',
          icon: require("@/assets/img/xls.png"),
          name: "数字零售行业云",
          content:
            "通过工业互联网+区块链技术将无人售货机设备状态、交易状态、GIS点位、交易信息、商品配置等业务进行全方面的管控和远程运维，数字化、透明化、智能化的为运营商、供应商、设备厂家、银行等不同维度客户提供真实有效的服务。"
        }
      ],
      industry_bg: "smt_bg"
    };
  },
  methods:{
    mounseEnter(bg=''){
      this.industry_bg = bg;
    }
  }
};
</script>

<style lang="less" scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #3963bc;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #061025;
}
.banner_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.carousel_item {
  color: #fff;
  .carousel_center {
    position: absolute;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 1600px;
    display: flex;
    align-items: center;
    justify-content: center;
    .carousel_left {
      display: flex;
      flex-direction: column;
      .carousel_title {
        color: #fff;
        font-size: 60px;
        margin-bottom: 20px;
      }
      .carousel_content {
        color: #fff;
        font-size: 30px;
        font-weight: 300;
        margin-top: 10px;
      }
    }

    .banner_icon {
      width: 700px;
      transform: translateX(80px);
    }
  }
}
.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  width: 1400px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px;
}
.title {
  color: #333;
  margin: 0 0 60px;
  font-size: 28px;
  font-weight: 300;
}
.items {
  width: 100%;
  display: flex;
  // align-items: center;
  justify-content: space-around;

  .single {
    flex: 1;
    padding: 30px 40px;
    // box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    transition: all 0.6s;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transform: translateY(-10px);
    }
    .icon {
      width: 70px;
      height: 70px;
      // background-color: #ccc;
    }
    .single_title {
      margin-bottom: 20px;
      margin-top: 30px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      font-size: 20px;
    }
    .content {
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
  }
}

.area {
  background: url("../../assets/img/area.png") 0 0 no-repeat;
  background-size: cover;
  color: #fff;
  .area_title {
    color: #fff;
  }
  .area_center {
    width: 1280px;
  }
  .area_single {
    background: linear-gradient(to bottom, #082ae78a, #03084480);
    margin-left: 20px;
    padding: 30px 40px;
    // box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    transition: all 0.6s;
    cursor: pointer;
    width: 400px;
    &:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transform: translateY(-10px);
    }
    .single_title {
      margin-bottom: 20px;
      margin-top: 30px;
      color: rgba(240, 240, 240, 0.85);
      font-weight: 500;
      font-size: 20px;
    }
    .content {
      color: rgba(241, 240, 240, 0.65);
      font-size: 14px;
      margin-bottom: 40px;
    }
    .btn {
      width: 100%;
      border: 1px solid #fff;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      margin-top: auto;
      &:hover {
        background: linear-gradient(158deg, #004eff, #0090ff);
        border: 1px solid transparent;
        color: #fff;
      }
    }
  }
  .area_icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(to top, #01c1e6, #0f64fe);
    border-radius: 50%;
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .area_img {
      width: 42px;
      height: 42px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  }
}

.industry {
   background: url("../../assets/img/smt.jpg") 0 0 no-repeat;
  background-size: cover;
  transition: all .4s;
}
.smt_bg {
  background: url("../../assets/img/smt.jpg") 0 0 no-repeat;
  background-size: cover;
}
.xls_bg {
  background: url("../../assets/img/sale.jpg") 0 0 no-repeat;
  background-size: cover;
}
.industry_single {
  // background: linear-gradient(to bottom, #082ae78a, #03084480);
  margin-left: 20px;
  padding: 30px 40px;
  // box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: justify;
  transition: all 0.6s;
  cursor: pointer;
  width: 400px;

  .single_title {
    margin-bottom: 20px;
    margin-top: 30px;
    color: rgba(240, 240, 240, 0.85);
    font-weight: 500;
    font-size: 20px;
  }
  .content {
    color: rgba(241, 240, 240, 0.65);
    font-size: 14px;
    margin-bottom: 40px;
  }
  .btn {
    width: 100%;
    border: 1px solid #fff;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    margin-top: auto;
    &:hover {
      background: linear-gradient(158deg, #004eff, #0090ff);
      border: 1px solid transparent;
      color: #fff;
    }
  }
}
</style>